
import React, { useState, useEffect } from 'react';
import { Radar } from '@ant-design/charts';
import { DataSet } from '@antv/data-set';
import Radardata  from "./data.json";
import { Select } from 'antd';
import "./style.css";
const DemoRadar = () => {
  const [data, setData] = useState([]);
  const [selVal, setSelval] = useState('2018')
  const [year, setYear] = useState([])//年份
  useEffect(() => {
    setData(newData);
    yearFilter();
  }, [selVal]);
  const handleChange = (value) => {
    console.log(value, "value");
    setSelval(value)
  }
  const yearFilter = () => {
    const years = Radardata.map(item => item.year)
    const val = new Set(years)
    setYear([...val])
  }
  const newData = Radardata.filter(item => item.year === selVal);
  const { DataView } = DataSet;
  const dv = new DataView().source(data);
  dv.transform({
    type: 'fold',
    fields: ['男', '女'], // 展开字段集
    key: 'user', // key字段
    value: 'score', // value字段
  });

  const config = {
    data: dv.rows,
    xField: 'item',
    yField: 'score',
    isStack :false,
    seriesField: 'user',
    width:500,
    meta: {
      score: {
        alias: '分数',
        min: 0,
        nice: true,
      },
    },
    columnStyle: {
      fill: 'red',
      fillOpacity: 0.5,
      stroke: 'black',
      lineWidth: 1,
      lineDash: [4,5],
      strokeOpacity: 0.7,
      shadowColor: 'black',
      shadowBlur: 10,
      shadowOffsetX: 5,
      shadowOffsetY: 5,
      cursor: 'pointer'
    },
    padding:[20, 8, 16, 8],
    xAxis: {
      line: null,
      tickLine: null,
    },
      yAxis: {
      label: false,
      grid: {
        alternateColor: 'rgba(0, 0, 0, 0.04)',
      },
    },
    radius:0.7,
    area: {
      color:['#000', '#fcca6c']
    },
    // 开启辅助点
    point: {},
    color: ['#0b65a8', '#fcca6c'],

  };

  return <div id="radar-box">
    <div className="radar">
    <span className="radar-ax"></span>
    <div className="radar-info">
          <div className="date">出生日期:</div>
          <Select defaultValue="请选择" style={{ width: 120 }}  onChange={handleChange}>

            {
              year.map((v, i) => (
                <Option value={v} key={i}>{v}</Option>
              ))
            }
          </Select>
        </div>
  </div>
    <Radar {...config} /></div>

};

export default DemoRadar;